<template>
	<view>
		<navBar :title="title">
			<template #right_Bar>
				<image :src="staticImg('lt.png')" mode="aspectFit" class="communImg"></image>
			</template>
		</navBar>

		<block v-for="(item, index) in pageData" :key="index">
			<view class="Wrapper">
				<view class="list" v-if="!item.expression && item.tagIcon == 'input'">
					<view class="d-flex a-center">
						<view
							class="iconfont icon-bitian size32"
							v-if="!item.isUser"
							:class="isrequired(item)"></view>
						<text class="list_name">{{ item.label }} : </text>
					</view>
					<input
						type="text"
						class="Input"
						:disabled="item.isUser"
						placeholder-class="place"
						v-model="item.defaultValue"
						:placeholder="`${item.placeholder}${item.label}`" />
				</view>
				<view class="list" v-if="item.expression == 'phone' && item.tagIcon == 'input'">
					<view class="d-flex a-center">
						<view
							class="iconfont icon-bitian size32"
							v-if="!item.isUser"
							:class="isrequired(item)"></view>
						<text class="list_name">{{ item.label }} : </text>
					</view>
					<input
						type="number"
						class="Input"
						:disabled="item.isUser"
						max-length="11"
						placeholder-class="place"
						v-model="item.defaultValue"
						:placeholder="`${item.placeholder}${item.label}`" />
				</view>
				<view
					class="list"
					@click="selctDate(item, index)"
					v-if="item.expression == 'date' && item.tagIcon == 'input'">
					<view class="d-flex a-center">
						<view
							class="iconfont icon-bitian size32"
							v-if="!item.isUser"
							:class="isrequired(item)"></view>
						<text class="list_name">{{ item.label }} : </text>
					</view>
					<view class="Input" :class="isValClass(item)">{{ isVal(item) }}</view>
				</view>
			</view>

			<view class="textarea" v-if="!item.expression && item.tagIcon == 'textarea'">
				<textarea
					class="Area"
					:disabled="item.isUser"
					v-model="item.defaultValue"
					:placeholder="`${item.placeholder}${item.label}`"
					placeholder-class="place"></textarea>
			</view>

			<view
				class="Uploadbox"
				v-if="
					item.isUser &&
					!item.expression &&
					item.tagIcon == 'file' &&
					item.uploadUrl.length
				">
				<text class="color—222 size28 bold500">{{ item.label }}</text>
				<view class="Box">
					<view class="upli" v-for="(sub, sin) in item.uploadUrl" :key="sin">
						<image
							:src="staticImg(getFileExtension(sub))"
							mode="aspectFill"
							class="filImg"></image>
					</view>
				</view>
			</view>
			<view
				class="Uploadbox"
				v-if="!item.isUser && !item.expression && item.tagIcon == 'file'">
				<text class="color—222 size28 bold500">{{ item.label }}</text>
				<view class="Box">
					<view class="upli" @click="uploadBtn(index)">
						<image :src="staticImg('gjsc.png')" mode="aspectFit" class="gjsc"></image>
						<text class="color-222 size24 m-top20">点击上传</text>
					</view>
					<view class="upli" v-for="(sub, sin) in item.uploadUrl" :key="sin">
						<image
							:src="staticImg(getFileExtension(sub))"
							mode="aspectFill"
							class="filImg"></image>
					</view>
				</view>
			</view>
		</block>

		<view class="rows m-top80">
			<view class="fotBtn" @click="SvaeForm">确定</view>
		</view>

		<up-datetime-picker
			ref="datetimePickerRef"
			:show="showDate"
			v-model="value1"
			mode="date"
			@cancel="showDate = false"
			@confirm="confirmDate">
		</up-datetime-picker>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {
		Toast,
		staticImg,
		tampToDate,
		getFileExtension,
		uploadFile,
		showLoading,
		hideLoading,
	} from '@/utils/utils.js';
	import Http from '@/utils/request.js';
	import { onLoad } from '@dcloudio/uni-app';
	const title = ref('案件代理');
	const showDate = ref(false);
	const value1 = ref(Date.now());
	const selectIndex = ref(0);
	const pageData = ref('');

	const order_id = ref('');
	const formId = ref('');
	const id = ref('');

	onLoad((opt) => {
		if (opt.id) id.value = opt.id;
		orderDetail(id.value);
	});

	const orderDetail = (id) => {
		showLoading('');
		Http.get({
			url: '/lawyer/caseOrderDetail',
			data: {
				id,
			},
		}).then((res) => {
			hideLoading();
			if (res.code != 0) return Toast(res.msg);

			formId.value = res.lawyer.formId;
			order_id.value = res.data.id;
			const userForm = res.userForm.formObject || [];
			const lawyerForm = res.lawyer.formObject || [];
			userForm.forEach((item) => {
				item.isUser = true;
				if (item.tagIcon == 'file' && !item.uploadUrl) {
					item.uploadUrl = [];
				} else if (item.tagIcon == 'file' && item.uploadUrl) {
					item.uploadUrl = item.uploadUrl.split(',');
				}
			});
			lawyerForm.forEach((item) => {
				item.isUser = false;
				if (item.tagIcon == 'file' && !item.uploadUrl) {
					item.uploadUrl = [];
				} else if (item.tagIcon == 'file' && item.uploadUrl) {
					item.uploadUrl = item.uploadUrl.split(',');
				}
			});

			pageData.value = [...userForm, ...lawyerForm];
		});
	};

	const SvaeForm = () => {
		const lawyerData = [];
		for (let item of pageData.value) {
			if (!item.isUser && item.tagIcon != 'file' && item.required && !item.defaultValue) {
				Toast(`${item.label}不能为空`);
				return;
			}
			if (!item.isUser && item.tagIcon == 'file' && item.required && !item.uploadUrl.length) {
				Toast(`${item.label}未上传`);
				return;
			}

			if (!item.isUser) lawyerData.push(item);
		}
		const formData = lawyerData.map((item) => ({
			...item,
			uploadUrl: Array.isArray(item.uploadUrl) ? item.uploadUrl.join(',') : item.uploadUrl,
		}));

		const obj = {};
		formData.forEach((item) => {
			if (item.tagIcon != 'file') {
				obj[`${item.id}`] = item.defaultValue;
			} else {
				obj[`${item.id}`] = item.uploadUrl;
			}
		});

		Http.post({
			url: '/api/saveFormRecord',
			data: {
				type: 'lawyer',
				order_id: order_id.value,
				formld: formId.value,
				formField: JSON.stringify(obj),
				formData: JSON.stringify(formData),
			},
			Typejson: false,
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			Toast(res.msg);
		});
	};

	const uploadBtn = (index) => {
		// #ifdef MP-WEIXIN
		wx.chooseMessageFile({
			count: 10,
			type: 'file',
			success: (res) => {
				const tempFiles = res.tempFiles;
				for (let item of tempFiles) {
					uploadFile(item.path).then((result) => {
						pageData.value[index].uploadUrl.push(result);
						console.log(result, 'result');
					});
				}
			},
			fail: (err) => {
				console.log(err);
			},
		});
		// #endif
	};

	const confirmDate = (event) => {
		pageData.value[selectIndex.value].defaultValue = tampToDate(event.value);
		showDate.value = false;
	};

	const selctDate = (item, index) => {
		if (item.isUser) return;
		selectIndex.value = index;
		showDate.value = true;
	};

	const isVal = (item) => {
		return item.defaultValue ? item.defaultValue : item.placeholder + item.label;
	};
	const isValClass = (item) => {
		return item.defaultValue ? 'color-222' : 'color-ccc';
	};
	const isrequired = (item) => {
		return item.required ? 'color-e81' : 'white';
	};
</script>

<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: 100rpx;
	}
</style>
<style lang="scss" scoped>
	.communImg {
		width: 42rpx;
		height: 34rpx;
		padding: 0 20rpx;
	}

	.Wrapper {
		width: 710rpx;
		padding: 0 20rpx;
		margin: 20rpx auto 0;
		background-color: #fff;
		border-radius: 10rpx;

		.list {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			border: 1rpx solid #fafafa;

			&_name {
				width: 230rpx;
				height: 100%;
				color: #222;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.Input {
			flex: 1;
			height: 100%;
			color: #222;
			font-size: 28rpx;
			position: relative;
			display: flex;
			align-items: center;
		}
	}

	.textarea {
		width: 710rpx;
		padding: 20rpx;
		margin: 20rpx auto 0;
		background-color: #fff;
		border-radius: 10rpx;

		.Area {
			width: 100%;
			height: 300rpx;
			color: #222;
			font-size: 28rpx;
		}

		.place {
			color: #ccc;
		}
	}

	.Uploadbox {
		width: 710rpx;
		margin: 20rpx auto 0;

		.Box {
			width: 100%;
			background-color: #ffffff;
			margin-top: 24rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 20rpx;

			.upli {
				height: 160rpx;
				background-color: #f3f5f7;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.gjsc {
					width: 54rpx;
					height: 40rpx;
				}

				.filImg {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.fotBtn {
		width: 710rpx;
		height: 88rpx;
		background-color: $color_008;
		color: #fff;
		font-size: 30rpx;
		border-radius: 10rpx;
		margin: 24rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
	}
</style>
